/* ==========================================================================
   Atlas layout
   
   Extra styling for responsive layouts
========================================================================== */
.layout-atlas-responsive-default {
    $sidebar-width: 60px;

    @media (min-width: $screen-sm) {
        .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
            width: $sidebar-width !important;

            .mx-scrollcontainer-wrapper > .mx-navigationtree ul li {
                &.mx-navigationtree-has-items:hover {
                    a {
                        background-color: $navsidebar-sub-bg;
                    }

                    ul {
                        position: absolute;
                        z-index: 100;
                        top: 0;
                        bottom: 0;
                        left: $sidebar-width;
                        display: block;
                        overflow-y: scroll;
                        min-width: 200px;
                        padding-top: 10px;
                    }
                }

                &.mx-navigationtree-collapsed,
                &.mx-navigationtree-has-items {
                    ul {
                        display: none;
                    }
                }
            }
        }
    }

    // Push aside for mobile
    @media (max-width: $screen-xs-max) {
        .mx-scrollcontainer-open {
            width: 1100px;
        }
    }

    // Sidebar
    .region-sidebar {
        .toggle-btn {
            width: $sidebar-width;
            height: 60px;
            border-color: transparent;
            border-radius: 0;
            background: transparent;
        }

        .mx-scrollcontainer-wrapper > .mx-navigationtree {
            .navbar-inner > ul > li {
                & > a {
                    height: $sidebar-width;
                    // Glyph icon
                    .glyphicon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 40px;
                        height: 40px;
                        margin-left: -5px;
                        padding: 10px;
                        border-radius: 3px;
                    }

                    &.active {
                        .glyphicon {
                            background: $brand-primary;
                        }
                    }
                }
            }
        }
    }

    // Topbar
    .region-topbar {
    }
}

// Topbar variant
.layout-atlas-responsive-topbar {
}

// All responsive layouts
.layout-atlas-responsive-default,
.layout-atlas-responsive-topbar {
    // Topbar
    .region-topbar {
        .toggle-btn {
            display: none;

            @media (max-width: $screen-xs-max) {
                display: inline-block;
            }
        }
    }
}
